<template>
	<view>
		<view class="" v-if="JSON.stringify(confirm) !== '{}'">
			<approverMsg :value="confirm"></approverMsg>
		</view>
		<navigator
			class="left_box"
			v-if="car.order_id"
			:url="'/pages/order/detail/detail?order_id=' + this.car.order_id"
		>
			<text>查看定单详情</text>
		</navigator>
		<view class="hotelService">
			<view>
				<view class="title">
					<text class="name">婚车</text>
				</view>
				<view class="content">
					<view class="box">
						<text>承办公司</text>
						<picker
							@change="chooseCarCompany"
							:disabled="isEdit"
							data-type="suborder"
							range-key="title"
							:range="companyList"
						>
							<view class="choose" v-if="companyList.length > 1">
								<text
									:class="
										Car_companyIndex !== '' ? 'active' : ''
									"
									>{{
										Car_companyIndex === ""
											? "请选择"
											: companyList[Car_companyIndex]
													.title
									}}</text
								>
								<image
									v-if="Car_companyIndex === ''"
									src="../../../static/images/right.png"
									mode=""
								></image>
							</view>
						</picker>
						<icon
							class="icon"
							v-if="Car_companyIndex !== ''"
							type="clear"
							size="22upx"
							@click="deleteCar_Company"
						></icon>
					</view>
					<view class="box">
						<!-- master_car_id -->
						<text>主车型号</text>
						<picker
							@change="chooseCar"
							:disabled="isEdit"
							range-key="title"
							:range="carList"
						>
							<view class="choose" v-if="carList.length > 1">
								<text
									:class="carIndex !== '' ? 'active' : ''"
									>{{
										carIndex === ""
											? "请选择"
											: car.master_car_text
									}}</text
								>
								<image
									v-if="carIndex === ''"
									src="../../../static/images/right.png"
									mode=""
								></image>
							</view>
						</picker>
						<icon
							class="icon"
							v-if="carIndex !== ''"
							type="clear"
							size="22upx"
							@click="deleteCar"
						></icon>
					</view>
					<view class="box">
						<text>主车数量</text>
						<input
							type="digit"
							:disabled="isEdit"
							v-model="car.master_car_amount"
							placeholder="请输入"
							placeholder-style="color:#999999;"
						/>
					</view>
					<view class="box">
						<text>主车费用</text>
						<input
							type="digit"
							:disabled="isEdit"
							v-model="car.master_car_price"
							placeholder="请输入"
							placeholder-style="color:#999999;"
						/>
					</view>
					<view class="box">
						<text>跟车型号</text>
						<picker
							@change="chooseFollowCar"
							:disabled="isEdit"
							range-key="title"
							:range="carList"
						>
							<view class="choose" v-if="carList.length > 1">
								<text
									:class="
										followCarIndex !== '' ? 'active' : ''
									"
									>{{
										followCarIndex === ""
											? "请选择"
											: car.slave_car_text
									}}</text
								>
								<image
									v-if="followCarIndex === ''"
									src="../../../static/images/right.png"
									mode=""
								></image>
							</view>
						</picker>
						<icon
							class="icon"
							v-if="followCarIndex !== ''"
							type="clear"
							size="22upx"
							@click="deleteFollowCar"
						></icon>
					</view>
					<view class="box">
						<text>跟车数量</text>
						<input
							type="digit"
							:disabled="isEdit"
							v-model="car.slave_car_amount"
							placeholder="请输入"
							placeholder-style="color:#999999;"
						/>
					</view>
					<view class="box">
						<text>跟车费用</text>
						<input
							type="digit"
							:disabled="isEdit"
							v-model="car.slave_car_price"
							placeholder="请输入"
							placeholder-style="color:#999999;"
						/>
					</view>
					<view class="box">
						<text>婚车服务时长</text>
						<input
							type="digit"
							:disabled="isEdit"
							v-model="car.service_hour"
							placeholder="请输入"
							placeholder-style="color:#999999;"
						/>
					</view>
					<view class="box">
						<text>婚车服务距离</text>
						<input
							type="digit"
							:disabled="isEdit"
							v-model="car.service_distance"
							placeholder="请输入"
							placeholder-style="color:#999999;"
						/>
					</view>
					<view class="remark">
						<text>备注</text>
						<textarea
							type="text"
							:disabled="isEdit"
							v-model="car.car_remark"
							placeholder="请输入备注"
							placeholder-style="color:#999999;"
						/>
					</view>
				</view>
			</view>
		</view>

		<!-- 收据照片 -->
		<view class="line"></view>
		<view class="photo">
			<text>上传照片</text>
			<view class="img_list" style="display: flex; justify-content: left">
				<view
					class="addPic"
					@click="lookImg({ list: car.imageArray, index: index })"
					v-for="(item, index) in car.imageArray"
					:key="index"
				>
					<image :src="item" mode="widthFix"></image>
					<uni-icons
						v-if="isEdit ? false : true"
						@click="deleteImageArray(index, 'imageArray')"
						type="minus-filled"
						size="10"
						color="red"
						style="position: absolute; right: -30upx; top: 0"
					></uni-icons>
				</view>
				<view
					class="addPic"
					v-if="isEdit ? false : true"
					@click="chooseImage('imageArray')"
				>
					<image src="../../../static/add.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 收据照片结束 -->

		<button
			type="default"
			class="order_btn"
			@click="saveFn()"
			v-if="options.api"
		>
			保存
		</button>
		<auditProcess
			:value="confirmList"
			:btnValue="buttons"
			:isShowBtn="options.api ? false : true"
			@resubmit="resubmits"
		></auditProcess>
	</view>
</template>

<script>
import approverMsg from "@/component/approverMsg.vue"; //审核流程
import auditProcess from "@/component/auditProcess.vue"; //审核流程
import selectBox from "@/component/selectBox.vue";
import timeSelector from "@/component/wing-time-selector/wing-time-selector.vue";
import navigation from "@/component/navigation.vue";
import sun from "@/utils/sun.js";
export default {
	components: {
		navigation,
		timeSelector,
		selectBox,
		approverMsg,
		auditProcess,
	},
	data() {
		return {
			isEdit: false,
			options: "",
			car: {
				master_car_amount: "", //数量
				master_car_price: "", //费用
				slave_car_amount: "", //跟车数量
				slave_car_price: "", //跟车费用
				service_hour: "", //服务时长
				service_distance: "", //服务距离
				master_car_id: "", //主车
				master_car_text: "", //主车
				slave_car_text: "", //跟车
				slave_car_id: "", //跟车
				car_remark: "", //备注
				imageArray: [],
			}, // 婚车
			Car_companyIndex: "",
			carIndex: "",
			followCarIndex: "",
			companyList: [],
			carList: [],
			confirmList: [],
			buttons: [],
			confirm: {}, //审批信息
		};
	},
	onLoad(options) {
		//审核查看
		if (options.lookApproval) {
			this.options = JSON.parse(options.lookApproval);
			this.isEdit = true;
			//查看信息
			this.getDetail(this.options);
		}
		//添加
		if (options.params) {
			this.options = JSON.parse(options.params);
			this.getData(this.options); //获取picker
		}

		//查看
		if (options.id) {
			this.options = options;
			this.isEdit = true;
			//查看信息
			this.getDetail(this.options);
		}
	},
	methods: {
		//获取查看信息
		getDetail(e) {
			let that = this;
			sun.request({
				url: "/h5/order.confirm/detail",
				showLoading: true,
				token: true,
				data: {
					id: e.id,
					type: e.user ? "confirm_user" : "",
				},
				success(res) {
					if (res.code == 200) {
						that.car = res.data.detail.car;
						that.confirmList = res.data.confirmList;
						that.confirm = res.data.confirm; //代表的是当前审核的信息
						that.buttons = res.data.buttons;
						//判断是否可以编辑
						that.buttons.map((item, index) => {
							if (item.id == "update") {
								that.isEdit = false;
							}
						});
						that.carList = res.data.carList ? res.data.carList : "";
						that.carList.map((items, indexs) => {
							if (items.id == that.car.master_car_id) {
								that.car.master_car_id = items.id;
								that.car.master_car_text = items.title;
								that.carIndex = indexs;
							}
							if (items.id == that.car.slave_car_id) {
								that.car.slave_car_id = items.id;
								that.car.slave_car_text = items.title;
								that.followCarIndex = indexs;
							}
						});
						that.companyList = res.data.companyList
							? res.data.companyList
							: "";
						that.companyList.map((item, index) => {
							if (item.id == that.car.company_id) {
								that.car.company_text = item.title;
								that.Car_companyIndex = index;
							}
						});
					}
				},
				fail(e) {
					uni.showToast({
						icon: "none",
						title: "服务器开小差去啦~",
					});
				},
			});
		},

		getData(e) {
			let that = this;
			sun.request({
				url: e.read,
				showLoading: true,
				token: true,
				data: {
					order_id: e.order_id,
				},
				success(res) {
					if (res.code == 200) {
						that.companyList = res.data.companyList
							? res.data.companyList
							: "";
						that.carList = res.data.list ? res.data.list : "";

						// that.incomePaymentList=res.data.incomePaymentList?res.data.incomePaymentList:''
						// that.incomeTypeList=res.data.incomeTypeList?res.data.incomeTypeList:''
					}
				},
				fail(e) {
					uni.showToast({
						icon: "none",
						title: "服务器开小差去啦~",
					});
				},
			});
		},
		//选择婚车型号
		chooseCar(e) {
			this.carIndex = e.target.value;
			this.car.master_car_id = this.carList[this.carIndex].id;
			this.car.master_car_text = this.carList[this.carIndex].title;
		},
		//删除婚车型号
		deleteCar() {
			this.carIndex = "";
		},
		//选择跟车型号
		chooseFollowCar(e) {
			this.followCarIndex = e.target.value;
			this.car.slave_car_text = this.carList[this.followCarIndex].title;
			this.car.slave_car_id = this.carList[this.followCarIndex].id;
		},
		//删除跟车型号
		deleteFollowCar() {
			this.followCarIndex = "";
		},
		//选择婚车所属公司
		chooseCarCompany(e) {
			let type = e.currentTarget.dataset.type;
			this.Car_companyIndex = e.target.value;
			this.car.company_id = this.companyList[this.Car_companyIndex].id;
			this.car.company_title = this.companyList[
				this.Car_companyIndex
			].title;
			this.getConfirmSequence({
				id: this.companyList[this.Car_companyIndex].id,
				type: type,
			});
		},
		//删除婚车所属公司
		deleteCar_Company() {
			this.Car_companyIndex = "";
			this.car.company_id = "";
			this.car.company_title = "";
		},
		//创建订单时的审核流程
		getConfirmSequence(e) {
			let that = this;
			sun.request({
				url: "/h5/order.confirm/getConfirmSequence",
				showLoading: true,
				token: true,
				data: {
					company_id: e.id,
					type: e.type,
				},
				success(res) {
					that.confirmList = res.data.confirmList;
				},
			});
		},
		//查看图片
		lookImg(e) {
			let _this = this;
			uni.previewImage({
				current: e.index,
				urls: e.list,
				longPressActions: {
					success: function (data) {},
					fail: function (err) {},
				},
			});
		},
		//选择图片
		chooseImage(e) {
			let _this = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
				success: function (res) {
					_this.upImg(res.tempFiles, e);
				},
			});
		},
		//上传图片
		upImg(data, e) {
			let _this = this;
			uni.showLoading({title:'上传中',mask:true});
			var i = data.i ? data.i : 0; //当前上传的哪张图片
			var success = data.success ? data.success : 0; //上传成功的个数
			var fail = data.fail ? data.fail : 0; //上传失败的个数
			uni.uploadFile({
				url: sun.http + "/h5/order.upload/doupload",
				filePath: data[i].path,
				header: {},
				name: "file",
				formData: {
					token: uni.getStorageSync("token")
						? uni.getStorageSync("token")
						: "",
				},
				success: (res) => {
					if (JSON.parse(res.data).msg == "上传成功") {
						success++; //图片上传成功，图片上传成功的变量+1
						uni.hideLoading();
					}
					if (e == "contact_img") {
						_this.banquet_incomeList.contact_img.push(
							JSON.parse(res.data).data.url
						);
					}
					if (e == "imageArray") {
						_this.car.imageArray.push(
							JSON.parse(res.data).data.url
						);
					}

					if (e == "note_img") {
						_this.banquet_incomeList.note_img.push(
							JSON.parse(res.data).data.url
						);
					}
				},
				fail: () => {
					fail++; //图片上传失败，图片上传失败的变量+1
				},
				complete: () => {
					i++; //这个图片执行完上传后，开始上传下一张
					if (i == data.length) {
						//当图片传完时，停止调用
						uni.showToast({
							icon: "none",
							title: "成功：" + success + " 失败：" + fail,
						});
					} else {
						//若图片还没有传完，则继续调用函数
						data.i = i;
						data.success = success;
						data.fail = fail;
						_this.upImg(data, e);
					}
				},
			});
		},
		//删除图片
		deleteImageArray(index, e) {
			if (e == "contact_img") {
				this.banquet_incomeList.contact_img.splice(index, 1);
			}
			if (e == "imageArray") {
				this.car.imageArray.splice(index, 1);
			}

			if (e == "note_img") {
				this.banquet_incomeList.note_img.splice(index, 1);
			}
		},

		//提交审核
		saveFn() {
			let that = this;
			sun.request({
				url: that.options.api,
				showLoading: true,
				token: true,
				data: {
					order_id: that.options.order_id,
					car: that.car ? JSON.stringify(that.car) : "",
				},
				success(res) {
					if (res.code == 200) {
						uni.redirectTo({
							url: "/pages/order/index",
						});
						uni.showToast({
							icon: "none",
							title: res.msg,
						});
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg,
						});
					}
				},
			});
		},
		// 编辑提交
		editFn(api, id) {
			let that = this;
			sun.request({
				url: api,
				showLoading: true,
				token: true,
				data: {
					order_confirm_id: that.options.id,
					id: id ? id : "",
					car: that.car ? JSON.stringify(that.car) : "",
				},
				success(res) {
					if (res.code == 200) {
						uni.redirectTo({
							url: "/pages/order/index",
						});
						uni.showToast({
							icon: "none",
							title: res.msg,
						});
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg,
						});
					}
				},
			});
		},
		//底部评论按钮
		resubmits(item) {
			if (
				item.label == "同意" ||
				item.label == "拒绝" ||
				item.label == "评论"
			) {
				this.commentFn(item);
			} else {
				this.editFn(item.api, item.id);
			}
		},
		// 编辑提交
		commentFn(e) {
			let that = this;
			sun.request({
				url: e.api,
				showLoading: true,
				token: true,
				data: {
					id: that.options.id ? that.options.id : "",
					content: e.content ? e.content : "",
					image: e.image ? e.image : "",
				},
				success(res) {
					if (res.code == 200) {
						uni.showToast({
							icon: "none",
							title: res.msg,
						});
						that.getDetail(that.options);
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg,
						});
					}
				},
			});
		},
	},
};
</script>

<style lang="less">
@import "../common.less";
</style>
